/**
 * Created by heshufen on 19/2/28.
 */
import React, {Component} from 'react';
import {Animated, Dimensions, Easing, StyleSheet, Text, View} from 'react-native';

const {width, height} = Dimensions.get('window');

export default class ToastView extends Component {

    moveAnim = new Animated.Value(height / 12);
    opacityAnim = new Animated.Value(0);
    dismissHandler = null;

    constructor(props) {
        super(props);
        this.state = {
            message: props.message !== undefined ? props.message : '',
            time: props.time,
        };
    }

    render() {
        return (
            <View style={styles.container} pointerEvents='none'>
                <Animated.View style={[styles.textContainer, this.props.style]}>
                    {this.renderContent()}
                </Animated.View>
            </View>
        );
    }

    renderContent() {
        return (
            <Text style={[styles.defaultText, this.props.textStyle]}>{this.state.message}</Text>
        );
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            message: nextProps.message !== undefined ? nextProps.message : '',
            time: nextProps.time,
        });
        clearTimeout(this.dismissHandler);
        this.timingDismiss();
    }

    componentDidMount() {
        Animated.timing(
            this.moveAnim,
            {
                toValue: height / 2,
                duration: 80,
                easing: Easing.ease,
            },
        ).start(this.timingDismiss);
        Animated.timing(
            this.opacityAnim,
            {
                toValue: 1,
                duration: 100,
                easing: Easing.linear,
            },
        ).start();
    }

    componentWillUnmount() {
        clearTimeout(this.dismissHandler);
    }


    timingDismiss = () => {
        this.dismissHandler = setTimeout(() => {
            this.dismiss();
        }, this.state.time);
    };

    dismiss = () => {
        Animated.timing(
            this.opacityAnim,
            {
                toValue: 0,
                duration: 100,
                easing: Easing.linear,
            },
        ).start(this.onDismiss);
    };

    onDismiss = () => {
        if (this.props.onDismiss) {
            this.props.onDismiss();
        }
    };
}

const styles = StyleSheet.create({
    textContainer: {
        backgroundColor: 'rgba(0,0,0,.9)',
        borderRadius: 4,
        paddingTop: 13,
        paddingBottom: 13,
        paddingLeft: 14,
        paddingRight: 14,
        bottom: height / 2,
        // maxWidth: width / 2,
        alignSelf: 'flex-end',
        alignItems: 'center',
        justifyContent: 'center',
    },
    defaultText: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        color: '#ffffff',
    },
    container: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        flexDirection: 'row',
        justifyContent: 'center',
        // backgroundColor: "rgba(0,0,0,0.70)",
    },
});
